import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import {fontSize_12, fontSize_13, fontSize_14, fontSize_15, fontSize_16} from "./theme";
import {getWalletMnemonic} from "./smartxL2Libs/smartxL2Web3";
import SimpleToast from "react-native-simple-toast";
import {setCopyMsg} from "../libs/utils";

const {width,height,scale} = Dimensions.get("window");

const L2_MnemonicView = ({navigation,route}:any) => {
    const [address,setAddress] = useState(route?.params?.address)
    const [chainID,setChainID] = useState(route?.params?.chainID)
    const [mnemonic,setMnemonic] = useState(route?.params?.mnemonic)
    const [walletInfo,setWalletInfo] = useState(route?.params?.walletInfo)
    //tipText2
    const [tipText2Title,setTipText2Title] = useState("切记")
    const [tipText2ContentList,setTipText2ContentList] = useState([
        "请勿将助记词透露给任何人",
        "助记词一旦丢失，资产将无法恢复",
        "请勿通过截屏、网络传输的方式进行备份保存",
        "遇到任何情况，请不要轻易卸载钱包App"
    ])

    useEffect(()=>{
        navigation.setOptions({
            title:"备份助记词"
        })
        updateMnemonic();
    },[])
    const updateMnemonic = async () => {
        if(mnemonic)
        {
            return ;
        }
        let mnemonicListTemp = await getWalletMnemonic(chainID, address);
        if (!mnemonicListTemp) {
            SimpleToast.show("地址助记词不存在");
            navigation.goBack();
            return;
        }
        setMnemonic(mnemonicListTemp)

    }
    return (
        <View style={styles.container}>
            <Text style={styles.TipText}>助记词用于恢复钱包及重置钱包密码，请准确无误抄写助记词，并存放在安全的地方</Text>
            <View style={styles.mnemonicContainer}>
                {
                    mnemonic && mnemonic.length?
                        mnemonic.map((item:string,index:number) => (
                            <View key={`mnemonic_${index}`} style={index>=mnemonic.length-3?styles.mnemonicListItemLast:styles.mnemonicListItem}>
                                <Text style={styles.mnemonicListItemContent}>{item}</Text>
                            </View>
                        )):null
                }
            </View>
            <View style={styles.TipText2Container}>
                <Text style={styles.TipText2_title}>{tipText2Title}</Text>
                {
                    tipText2ContentList.map((item,index)=>(
                        <Text style={styles.TipText2_content} key={`tipText2ContentList_${index}`}>· {item}</Text>
                    ))
                }
            </View>
            <View style={{flex:1}}/>
            <TouchableHighlight
                underlayColor={"#1f83fd"}
                onPress={()=>{
                    console.log(route?.params?.mnemonic)
                    console.log(`mnemonic.length:${mnemonic.length}`)
                    console.log(mnemonic)

                    navigation.navigate("L2_CheckMnemonicView",{mnemonic,walletInfo,chainID})
                }}
                style={styles.AllLineBTN}
            >
                <Text style={styles.AllLineBTNTitle}>备份完成,进行验证</Text>

            </TouchableHighlight>
            <Text
                onPress={()=>{
                    let str = mnemonic.join(" ");
                    setCopyMsg(str)
                }}
                style={styles.AllLineTipBTN}
            >复制助记词</Text>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: "white"
    },
    TipText:{
        fontSize:fontSize_15,
        color:"black",
        flexWrap:"wrap",
        // paddingLeft:15,
        // fontWeight:"bold",
        marginTop:20,
        lineHeight:18,
        letterSpacing:0.5
    },
    mnemonicContainer:{
        width:"100%",
        padding:15,
        marginTop:20,
        marginBottom:30,
        backgroundColor:"#f5f6f8",
        borderRadius:10,
        flexWrap:"wrap",
        flexDirection:"row",
        justifyContent:"space-between",
    },
    mnemonicListItem:{
        width:"29%",
        backgroundColor:"white",
        alignItems:"center",
        justifyContent:"center",
        marginBottom:10
    },
    mnemonicListItemLast:{
        width:"29%",
        backgroundColor:"white",
        alignItems:"center",
        justifyContent:"center",
    },
    mnemonicListItemContent:{
        fontSize: fontSize_15,
        lineHeight:40,
    },
    TipText2Container:{
        width:"100%",
        flexDirection:"column"
    },
    TipText2_title:{
        color:"#de5d59",
        fontSize:fontSize_15,
        lineHeight:30,
        fontWeight:"bold",
        letterSpacing:0.5

    },
    TipText2_content:{
        color:"#de5d59",
        fontSize:fontSize_14,
        lineHeight:24,
        fontWeight:"bold",
        letterSpacing:0.5
    },
    AllLineBTN:{
        width:"100%",
        height:40,
        backgroundColor:"#1f83fd",
        justifyContent:"center",
        alignItems:"center",
        borderRadius:5,
        marginTop:10,
        marginBottom:10
    },
    AllLineBTNTitle:{
        fontSize:fontSize_16,
        color:"white",
    },
    AllLineTipBTN:{
        textAlign:"center",
        fontSize:fontSize_13,
        color:"#4189df",
        marginTop:5,
        marginBottom:10
    }
})
export default L2_MnemonicView;


